import { useEffect} from 'react';
import useGetMap from '../hooks/useGetMap';
import MapLoad from '../Map_load';
import useInitCountry from '../hooks/useInitCountry';

const MapB = () => {
  const { map, loading, AMap } = useGetMap({
    id: 'map_B_id',
    mapOption: {
      zoom: 4.5,
      center: [116.412427, 39.303573],
      defaultCursor: 'pointer',
      pitch: 0,
      viewMode: '3D',
      mapStyle:'amap://styles/2c3fbcbc45b2492dfde2badb77e31cde'
    },
    // mapEvents: [
    //   {
    //     type: 'complete',
    //     callBack: ({ AMap, map }) => {
    //       const bounds = new AMap.Bounds(
    //         [73.66, 3.86], // 西南角坐标
    //         [135.05, 53.55] // 东北角坐标
    //       );
    //       map.setLimitBounds(bounds); // 设置限制区域
    //     }
    //   }
    // ]
  });

  const { provinceCode } = useInitCountry({ AMap, map })

  useEffect(()=>{
    console.log(provinceCode,'provinceCode');
    
  },[provinceCode])

  return (
    <div className="w-full h-full relative">
    <div id="map_B_id" className="w-full h-full"></div>
    {
      loading ? <div className="absolute z-1000 w-full h-full top-0"><MapLoad /></div> : null
    }
  </div>
  );
};

export default MapB;